<script lang="ts" setup>

import { ref, reactive } from 'vue'

import type { TabsPaneContext } from 'element-plus'

const activeNameC = ref('one')

const input = ref('')
// const isClick = ref(true)

const formInline = reactive({
  // user: '',
  region: '第四自然水厂',
  // date: '',
})

const now = new Date()
const defaultTime = new Date(now.getFullYear(), now.getMonth());
const defaultTime2 = new Date(now.getFullYear(), now.getMonth());

const value1 = ref('')
const value2 = ref('')

</script>

<template>

  <div class="first">

    <el-input v-model="input" disabled placeholder="查询条件"></el-input>
    <div class="detail">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="所属单位 :
              ">
          <el-select v-model="formInline.region" clearable>
            <el-option label="第四自然水厂" value="第四自然水厂" />
            <el-option label="消河" value="消河" />
            <el-option label="白马" value="白马" />
          </el-select>
        </el-form-item>

        <!-- 选择时间 -->
        <el-form-item label="开始时间 : ">
          <el-col :span="11">
            <el-date-picker v-model="value1" type="date" placeholder="日历控件" :default-value="defaultTime" />
          </el-col>


        </el-form-item>
        <el-form-item label="结束时间 : ">
          <el-col :span="11">
            <el-date-picker v-model="value2" type="date" placeholder="日历控件" :default-value="defaultTime2" />
          </el-col>


        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查看</el-button>
        </el-form-item>



      </el-form>
    </div>
    <!-- 图片 -->
    <div class="image">
      <el-image
        src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%B0%B4%E5%8E%82%E7%AE%A1%E7%90%86/u4607.png"
        :fit="fit"></el-image>
    </div>



  </div>
</template>

<style lang="scss" scoped>
.first {
  .el-input {
    margin-bottom: 5px;
  }

  .detail {
    border: 2px solid #ebe8e8;
    border-radius: 4px 4px 0 0;
    padding: 10px 10px;

    .el-form {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-evenly;
      align-content: center;

      .el-form-item {
        align-self: center;
        margin: 0;
        margin-bottom: 10px;
        margin-right: 20px;
      }

    }

  }

  .image {
    width: 100%;
    margin-top: 10px;
  }

  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }

}
</style>